import { useState } from "react";
import { TypingEffect } from './TypingEffect';

export function SubTitle({ className = "sub-title", icon, title, stitle, detail, speed = 0, onComplete = () => { } }) {
  const [currentSection, setCurrentSection] = useState(0);
  const DirectOutput = ({ text }) => <span>{text}</span>;
  const OutputComponent = speed === 0 ? DirectOutput : TypingEffect;
  return (
    <div className={className}>
      <div style={{ marginTop: '15px', fontSize: 15 }}>
        {icon}
        <span style={{ marginLeft: '0.5em', fontWeight: 'bold', fontSize: '16px' }}>
          <OutputComponent text={title} start={currentSection === 0} speed={speed} onComplete={() => setCurrentSection(1)} />
        </span>
        <span style={{ fontSize: '14px' }}>
          <OutputComponent text={stitle} start={currentSection === 1} speed={speed} onComplete={() => { onComplete(); setCurrentSection(2); }} />
        </span>
      </div>
      <div style={{ color: '#64748b' }}>
        <OutputComponent text={detail} start={currentSection === 2} speed={speed} onComplete={() => setCurrentSection(3)} />
      </div>
    </div>
  );
}
